<div
  class="accessory-box"
  [ngClass]="{
    'press-single': service.values.ProgrammableSwitchEvent === 0,
    'press-double': service.values.ProgrammableSwitchEvent === 1,
    'press-long': service.values.ProgrammableSwitchEvent === 2,
  }"
>
  <div class="d-flex flex-column h-100">
    <div [attr.aria-label]="'accessories.core.stateless_programmable_switch' | translate" class="accessory-svg">
      <svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <!-- frame -->
        <rect x="1" y="1" width="30" height="30" rx="3" stroke="#7f7f7f" fill="none" stroke-width="2" />
        <!-- single click -->
        <circle
          class="single"
          cx="8.5"
          cy="9.5"
          r="5"
          stroke="#7f7f7f"
          stroke-width="1"
          fill="none"
          fill-opacity="0.5"
        />
        <!-- double click, outer then inner -->
        <circle
          class="double"
          cx="23.5"
          cy="9.5"
          r="5"
          stroke="#7f7f7f"
          stroke-width="1"
          fill="none"
          fill-opacity="0.5"
        />
        <circle cx="23.5" cy="9.5" r="3" stroke="#7f7f7f" stroke-width="1" fill="none" />
        <!-- long click -->
        <circle class="long" cx="16" cy="23.5" r="5" stroke="#7f7f7f" stroke-width="1" fill="none" fill-opacity="0.5" />
        <!-- long click lies, left then right -->
        <line x1="5" y1="23.5" x2="11" y2="23.5" stroke="#7f7f7f" stroke-width="0.5" stroke-linecap="round" />
        <line x1="21" y1="23.5" x2="27" y2="23.5" stroke="#7f7f7f" stroke-width="0.5" stroke-linecap="round" />
      </svg>
    </div>
    <div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div>
    <div class="accessory-label grey-text">{{ 'accessories.control.stateless' | translate }}</div>
  </div>
</div>
